<template>
	<w-container>
		<w-navbar :placeholder="false" title='凤羽商店' :bgColor="bgColor" :opacity="opacity" :leftIconSize="32"
			:leftIcon="opacity>0.8?'arrow-left-back':'arrow-left-back'" :titleStyle="{color:opacity>0.8?'#222':'#fff'}"
			:product="{name:'凤羽商店'}">
		</w-navbar>
		<!-- 用户信息 -->
		<view class="header">
			<w-navbar :placeholder="true" bgColor="transparent"></w-navbar>
			<view class="content flex flex-ai-center flex-js-sb">
				<view class="flex flex-dir-col">
					<view class="flex flex-ai-center">
						<w-icon name="my-fengyu" :size="38/2"></w-icon>
						<view class="font-color-white font-size-16 ml-8">我的凤羽</view>
					</view>
					<view class="font-w-600 font-color-white" style="font-size: 72rpx;margin-top: 2	8rpx;">{{ userInfo.crystal_yellow || 0 }}</view>
				</view>
				<image  class="yumao" :src="$ossUrl + '/static/shop/yumao.png'"></image>
			</view>
			<image @click="$u.route('/pages/rules/rules',{type:3})" class="rule-bg" :src="$ossUrl + '/static/shop/13.png'"></image>
			<!-- <view class="user_card">
				<view class="flex-center-sb">
					<view class="flex-center" @click="$u.route('/pages/shop/detailList')">
						<u-avatar :src="avatar" size='28'></u-avatar>
						<text class="ml-6 font-size-14 font-color-white">{{userInfo.nickname}}</text>
						<w-icon name="right5" size="24"></w-icon>
					</view>
					<image :src="$ossUrl + '/static/shop/2.png'" mode="widthFix" class="strategy"
						@click="$u.route('/pages/rules/rules',{type:3})"></image>
				</view>
				<view class="sjnum flex flex-js-sb flex-ai-center">
					<view class="sj-box">
						<text>{{ userInfo.crystal_yellow || 0 }}</text>
						<w-icon name="hsj" size="28"></w-icon>
					</view>
					<view class="sj-box">
						<text>{{ userInfo.crystal_purple || 0 }}</text>
						<w-icon name="zsj" size="28"></w-icon>
					</view>
					<view class="sj-box">
						<text>{{ userInfo.crystal_blue || 0 }}</text>
						<w-icon name="lsj" size="28"></w-icon>
					</view>
				</view>
			</view> -->
		</view>
		 <view class="fengyu-get-box flex flex-ai-center flex-js-sb plr-16">
			 <view class="flex flex-ai-center">
				<w-image src="/static/shop/icon-get-fengyu.png" width="40" height="40"></w-image>
				<view class="font-size-14 font-w-500 ml-8" style="color: #0C0C0C;">获取凤羽</view>
			 </view>
			 <view class="flex flex-ai-center">
				<w-image src="/static/shop/icon-detail-fengyu.png" width="40" height="40"></w-image>
				<view class="font-size-14 font-w-500 ml-8" style="color: #0C0C0C;">凤羽详情</view>
			 </view>
		 </view>

		<!-- 商城 -->
		<view class="shop">
			<!-- <w-tabs lineWidth="35" lineHeight="10"  :tabList="tabList" @change="changeTab" class="plr-70"></w-tabs>
			<w-tabs lineWidth="40" :lineHeight="0" :tabList="tabList2" @change="changeTab2" class="plr-30 mt-2"
				:inactiveStyle="{fontSize: '14px'}" :activeStyle="{fontSize: '16px',color: '#FF2D23'}"
				:itemStyle="{padding:0}"></w-tabs> -->
				<view class="flex flex-ai-center">
					<view class="shuxian"></view>
					<view class="font-w-bold font-size-14 ml-10" style="color: #0C0C0C;">凤羽兑换藏品</view>
				</view>
			<!-- 列表 -->
			<view class="flex flex-js-sb flex-w mt-16">
				<shop-goods-item v-for="item in list" :key="item.goods_id" :item="item"></shop-goods-item>
			</view>
			<!-- 加载 -->
			<w-loading :type="loadingType" emptyType="shop" class="mt-12" emptyTop="50" loadingText="--- 没有更多记录啦---"></w-loading>
			<view v-if="!list.length" class="flex flex-dir-col flex-ai-center" style="color: #696961;">
				<view class="font-size-18  mt-20">暂无更多</view>
					<view class="font-size-14 font-color-999 mt-10">目前没有任何数据</view>
			</view>
		</view>
	</w-container>
</template>

<script>
	import shopGoodsItem from './components/shop-goods-item.vue';
	import {
		goodsList
	} from '@/api/shop/shop.js';
	import opacityMixin from '@/mixins/opacityNav.js'
	export default {
		components: {
			shopGoodsItem
		},
		mixins: [opacityMixin],
		data() {
			return {
				lineBg: `url(${'/static/bg/bg-nav-line.png'}) 100% 100%`,
				// 商品类型:10=藏品,20=盲盒,30=实物
				tabList: [{
						type: 10,
						name: '藏品'
					},
					{
						type: 20,
						name: '盲盒'
					},
					{
						type: 30,
						name: '实物'
					}
				],
				// 水晶类型:yellow=黄水晶,purple=紫水晶,blue=蓝水晶
				tabList2: [{
						type: '',
						name: '全部'
					},
					{
						type: 'yellow',
						name: '黄水晶'
					},
					{
						type: 'purple',
						name: '紫水晶'
					},
					{
						type: 'blue',
						name: '蓝水晶'
					}
				],

				param: {
					type: '10',
					page: 1,
					crystal_type: '',
				},
				list: [],
				isNext: true,
				loadingType: 'none'
			};
		},
		computed: {
			avatar() {
				if (this.userInfo.avatar) {
					return this.$ossUrl + this.userInfo.avatar
				}
				return;
			}
		},
		created() {
			this.getList()
		},
		methods: {
			// 刷新
			refresh() {
				this.loadingType = 'none'
				this.isNext = true
				this.list = []
				this.page = 1
				this.getList()
			},
			changeTab(e) {
				this.param.type = e.type;
				this.refresh()
			},
			changeTab2(e) {
				this.param.crystal_type = e.type;
				this.refresh()
			},
			getList() {
				if (!this.isNext) return;
				this.loadingType = 'loading';
				goodsList(this.param).then(res => {
					let {
						data,
						last_page
					} = res.data;
					this.list = [...this.list, ...data];
					if (this.param.page < last_page) {
						this.param.page++;
					} else {
						this.isNext = false;
						this.loadingType = 'nomore';
					}!data.length && (this.loadingType = 'empty');
				}).catch(() => {})
			}
		},
		onReachBottom() {
			this.getList()
		}
	}
</script>
<style>
	page {
		background: #FEF0E5;
	}
</style>
<style lang="scss">   
	.container {
		@extend .flex, .flex-dir-col;
		.header {
			width: 750rpx;
			// height: 454rpx;
			background: linear-gradient( 90deg, #FF623F 0%, #FEB6A0 100%);
			border-radius: 0rpx 0rpx 32rpx 32rpx;
			position: relative;
			.content {
				margin: 48rpx 42rpx 50rpx;
				.yumao {
					width: 228rpx;
					height: 228rpx;
				}
			}
			.rule-bg {
				position: absolute;
				bottom: 64rpx;
				right: 0;
				width: 64rpx;
				height: 160rpx;
			}
		}
		.fengyu-get-box {
			width: 686rpx;
			height: 128rpx;
			background: linear-gradient( 180deg, #F8D0B7 0%, #FEFEFE 100%);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 2rpx solid #FFFFFF;
			position: relative;
			margin: -64rpx auto;
		}
		.user_card {
			// width: 100%;
			// height: 384rpx;
			// background-image: url($IMG_URL+'/static/shop/1.png');
			// background-size: 100% 100%;
			// padding: 44rpx 10rpx 40rpx 32rpx;
			// @extend .flex, .flex-dir-col, .flex-js-sb;

			.strategy {
				width: 176rpx;
				margin-right: 18rpx;
				// height: 52rpx;
			}

			.sjnum {
				padding-right: 22rpx;
				padding-bottom: 20rpx;
				.sj-box {
					width: 196rpx;
					height: 144rpx;
					background: rgba(255,255,255,0.14);
					border-radius: 4px 4px 4px 4px;
				}
				>view {
					width: 202rpx;
					@extend .flex, .flex-dir-col, .flex-ai-center, .flex-js-center;

					>text {
						@extend .font-size-20, .font-w-bold, .font-color-white, .mb-8
					}
				}
			}
		}

		.shop {
			padding: 30rpx;
			margin-top: 66rpx;
			// flex: 1;
			// border-top-left-radius: 20rpx;
			// border-top-right-radius: 20rpx;
			.shuxian{
				width: 8rpx;
				height: 32rpx;
				background: #FF6A48;
			}
		}
	}
	/deep/ .u-tabs__wrapper__nav__line {
		left: 0;
		bottom: 15rpx;
	}
</style>